<!doctype html>
<html class="no-js h-100" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link th:href="@{'https://fonts.googleapis.com/icon?family='+'Material+Icons'}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" id="main-stylesheet" data-version="1.1.0"
          th:href="@{/styles/shards-dashboards.1.1.0.min.css}">
    <link rel="stylesheet" th:href="@{/styles/extras.1.1.0.min.css}">
    <script async defer th:src="@{https://buttons.github.io/buttons.js}"></script>
</head>
<body class="h-100">
<div class="container-fluid">
    <div class="row">
        <main class="main-content col-lg-10 col-md-9 col-sm-12 p-0 offset-lg-2 offset-md-3">
            <div class="main-navbar sticky-top bg-white">

            </div>
            <!-- / .main-navbar -->
            <div class="main-content-container container-fluid px-4">
                <!-- Page Header -->
                <div class="page-header row no-gutters py-4">
                    <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
                        <span class="text-uppercase page-subtitle">Overview</span>
                        <h3 class="page-title">User Profile</h3>
                    </div>
                </div>
                <!-- End Page Header -->
                <!-- Default Light Table -->
                <div class="row">
                    <div class="col-lg-4">
                        <div class="card card-small mb-4 pt-3">
                            <div class="card-header border-bottom text-center">
                                <div class="mb-3 mx-auto">
                                    <img class="rounded-circle" th:src="${UserInfo.image}" alt="User Avatar"
                                         width="110"></div>
                                <h4 class="mb-0" th:text="${UserInfo.name}"></h4>
                                <span class="text-muted d-block mb-2">Project Manager</span>
                                <button type="button" class="mb-2 btn btn-sm btn-pill btn-outline-primary mr-2">
                                    <i class="material-icons mr-1">person_add</i>Follow
                                </button>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item px-4">
                                    <div class="progress-wrapper">
                                        <strong class="text-muted d-block mb-2">Workload</strong>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="74"
                                                 aria-valuemin="0" aria-valuemax="100" style="width: 74%;">
                                                <span class="progress-value">74%</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item p-4">
                                    <strong class="text-muted d-block mb-2">Description</strong>
                                    <span th:text="${UserInfo.description}"></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="card card-small mb-4">
                            <div class="card-header border-bottom">
                                <h6 class="m-0">Account Details</h6>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item p-3">
                                    <div class="row">
                                        <div class="col">
                                            <form th:action="@{/index/Update}" th:object="${UserInfo}">
                                                <div class="form-row">
                                                    <div class="form-group col-md-6">
                                                        <label for="Name">Name</label>
                                                        <input type="text" class="form-control" id="Name" name="name"
                                                               placeholder="Name" th:field="*{name}">
                                                    </div>
                                                    <div class="form-group col-md-6">
                                                        <label for="images">Image</label>
                                                        <div style="display: none" th:text="*{image}" id="image"></div>
                                                        <select id="images" class="form-control" name="image">
                                                            <option th:each="image:${imageList}"
                                                                    th:value="${image.image}">[[${image.image}]]
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-row">
                                                    <div class="form-group col-md-6">
                                                        <label for="feEmailAddress">Email</label>
                                                        <input type="email" class="form-control" id="feEmailAddress"
                                                               name="email" placeholder="Email" th:field="*{email}">
                                                    </div>
                                                    <div class="form-group col-md-6">
                                                        <label for="fePassword">Password</label>
                                                        <input type="text" class="form-control" id="fePassword"
                                                               name="password" placeholder="Password"
                                                               th:field="*{password}"></div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="feInputAddress">Address</label>
                                                    <input type="text" class="form-control" id="feInputAddress"
                                                           name="address" placeholder="1234 Main St"
                                                           th:field="*{address}"></div>
                                                <div class="form-row">
                                                    <div class="form-group col-md-4">
                                                        <label for="cityList">City</label>
                                                        <div style="display: none" th:text="${UserInfo.city}" id="city"></div>
                                                        <select id="cityList" class="form-control" name="city">
                                                            <option th:each="city:${CityList}" th:value="${city.state}">
                                                                [[${city.state}]]
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-row">
                                                    <div class="form-group col-md-12">
                                                        <label for="feDescription">Description</label>
                                                        <textarea id="feDescription" class="form-control"
                                                                  name="description" rows="5"
                                                                  th:field="*{description}"></textarea>
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-accent">Update Account</button>
                                            </form>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- End Default Light Table -->
            </div>
        </main>
    </div>
</div>
<script>
    window.onload = function yeye() {
        select();
        selectimage();
    }

    function select() {
        var select = document.getElementById("cityList");
        var city = document.getElementById("city");
        console.log(select)
        console.log(city)
        for (var i = 0; i < select.children.length; i++) {
            if (select.children[i].value == city.innerText) {
                select.children[i].setAttribute("selected", true);
            }
        }
    }

    function selectimage() {
        var select = document.getElementById("images");
        var image = document.getElementById("image");
        for (var i = 0; i < select.children.length; i++) {
            if (select.children[i].value == image.innerText) {
                select.children[i].setAttribute("selected", true);
            }
        }
    }
</script>
<script th:src="@{/scripts/jquery-3.3.1.min.js}"></script>
<script th:src="@{/scripts/popper.min.js}"></script>
<script th:src="@{/scripts/bootstrap.min.js}"></script>
<script th:src="@{/scripts/Chart.min.js}"></script>
<script th:src="@{/scripts/shards.min.js}"></script>
<script th:src="@{/scripts/jquery.sharrre.min.js}"></script>
<script th:src="@{/scripts/extras.1.1.0.min.js}"></script>
<script th:src="@{/scripts/shards-dashboards.1.1.0.min.js}"></script>
</body>
</html>